<template>
  <div class="video-list">
    <div class="search-bar">
      <a-input-search
        v-model:value="videoQueryParams.title"
        placeholder="搜索视频标题"
        enter-button
        @search="handleSearch"
        style="width: 200px"
      />
    </div>

    <div
      v-if="videoList.length > 0"
      class="video-item-list"
    >
      <div
        class="video-list-item"
        v-for="item in videoList"
        :key="item.id"
      >
        <div class="video-container">
          <img
            :src="item.thumbnailUrl"
            alt="视频缩略图"
            @click="locateToVideo(item.id)"
          />

          <div class="video-info-container">
            <span class="play-count"
              ><PlayCircleOutlined /> {{ formatNumber(item.viewCount) }}</span
            >
          </div>
        </div>

        <a-button
          type="link"
          class="video-title"
          :title="item.title"
          @click="locateToVideo(item.id)"
        >
          <strong>{{ item.title }}</strong>
        </a-button>

        <span class="video-date">
          {{ timeFormat(item.publishTime) }}
        </span>
      </div>

      <Pagination
        style="margin-top: 20px"
        v-model:page="videoQueryParams.pageNo"
        v-model:limit="videoQueryParams.pageSize"
        :total="videoListTotal"
        @pagination="getVideoList"
      />
    </div>

    <div
      style="width: 100%"
      v-else
    >
      <a-empty />
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import type { CvVideoItemRespVO } from '@/types/global'
import { PlayCircleOutlined } from '@ant-design/icons-vue'
import type { CvVideoProfileReqVO } from '@/types/profile'

const emit = defineEmits(['getList'])

const videoList = defineModel<CvVideoItemRespVO[]>()
const videoQueryParams = defineModel<CvVideoProfileReqVO>('queryParams')
const videoListTotal = defineModel('total')

/**
 * 获取视频列表
 */
const getVideoList = async () => {
  emit('getList')
}

/**
 * 播放量格式化
 */
const formatNumber = (num: number) => {
  if (!num) {
    return 0
  }

  if (num >= 1000 && num < 10000) {
    return (num / 1000).toFixed(1) + 'K'
  } else if (num >= 10000) {
    return (num / 10000).toFixed(1) + 'W'
  } else {
    return num.toString()
  }
}

/**
 * 时间格式化
 */
const timeFormat = (time: string) => {
  if (time) {
    return dayjs(time).format('YYYY-MM-DD')
  }
  return ''
}

/**
 * 跳转到视频详情页
 */
const locateToVideo = (videoId: number) => {
  window.open(`/video?videoId=${videoId}`)
}

/**
 * 处理搜索
 */
const handleSearch = () => {
  videoQueryParams.value.pageNo = 1
  getVideoList()
}
</script>

<style scoped>
.video-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.search-bar {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-bottom: 20px;
}

.video-item-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.video-list-item {
  width: 18%;
  margin: 10px;
}

.video-list-item img {
  width: 100%;
  border-radius: 8px;
  height: 120px;
  cursor: pointer;
}

.video-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
}

.video-info-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 14px;
  font-weight: bold;
}

.play-count {
  padding: 5px;
}

.video-title {
  font-size: 15px;
  padding: 0;
  color: #000000;
}

.video-date {
  font-size: 14px;
  color: #666;
  display: block;
  margin-top: 5px;
}
</style>
